<template>
  <div>
      <div v-if="compOption.options.isRemark && compOption.options.hasUpload">
          <div style="display: flex;align-items: center;">
              <div class="black-box" @click="isShowClick = !isShowClick">
                        <span v-if="isShowClick" style="margin-right: 5px">
                            <img src="@/assets/xiajiantou.png" style="width: 10px;height: 10px"/>
                        </span>
                  <span v-else style="margin-right: 5px">
                            <img src="@/assets/shangjiantou.png" style="width: 10px;height: 10px"/>
                        </span>
                  备注说明
              </div>
              <el-upload
                      v-if="showUpload()"
                      class="upload-demo"
                      action="http://129.211.212.235:8095/file/upload"
                      :on-success="successUpload"
                      :before-upload="handleBeforeUpload"
                      :show-file-list="false"
                      :file-list="compOption.options.uploadConfig.value">
                  <div class="black-box">上传附件</div>
              </el-upload>
          </div>
          <!--                上传-->
          <div v-if="isShowClick" style="width: 100%">
              <el-input type="textarea" v-model="compOption.options.remarkConfig.value"
                        placeholder="请在此处填写备注或扣分原因" :disabled="mode != 'xiezuo'"
              :autosize="true"></el-input>
          </div>
          <div v-if="compOption.options.uploadConfig.value.length">
              <div v-for="itemUrl in compOption.options.uploadConfig.value" :key="itemUrl.id"
                   style="display: flex;justify-content: space-between;border: 1px solid rgba(201, 198, 198, 0.5);border-radius: 2px;
padding: 5px 10px;align-items: center;cursor: pointer" @click.stop="openPlay(itemUrl)">
                  <div style="display: flex;flex-direction: column;justify-content: flex-start">
                      <div style="color: #333;font-size: 15px;margin-bottom: 5px">{{itemUrl.fileName}}</div>
                      <div style="color: #999;font-size: 13px">{{itemUrl.fileSize}}</div>
                  </div>
                  <div @click.stop="delImage(itemUrl)">
                      <img src="@/assets/delete.png" style="width: 18px;height: 18px;cursor: pointer">
                  </div>
              </div>
          </div>
      </div>
      <div v-else-if="compOption.options.isRemark">
          <div class="black-box" style="width: 95px;height: 30px" @click="isShowClick = !isShowClick">
                        <span v-if="isShowClick" style="margin-right: 5px">
                            <img src="@/assets/xiajiantou.png" style="width: 10px;height: 10px"/>
                        </span>
              <span v-else style="margin-right: 5px">
                            <img src="@/assets/shangjiantou.png" style="width: 10px;height: 10px"/>
                        </span>
              备注说明
          </div>
          <div v-if="isShowClick" style="width: 100%">
              <el-input type="textarea" v-model="compOption.options.remarkConfig.value"
                        placeholder="请在此处填写备注或扣分原因" :disabled="mode != 'xiezuo'" :autosize="true"></el-input>
          </div>
      </div>
      <div v-else-if="compOption.options.hasUpload">
          <el-upload
                  v-if="showUpload()"
                  class="upload-demo"
                  action="http://129.211.212.235:8095/file/upload"
                  :on-success="successUpload"
                  :before-upload="handleBeforeUpload"
                  :show-file-list="false"
                  :file-list="compOption.options.uploadConfig.value">
              <div class="black-box">上传附件</div>
          </el-upload>
          <div v-if="compOption.options.uploadConfig.value.length">
              <div v-for="itemUrl in compOption.options.uploadConfig.value" :key="itemUrl.id"
                   style="display: flex;justify-content: space-between;border: 1px solid rgba(201, 198, 198, 0.5);border-radius: 2px;
padding: 5px 10px;align-items: center;cursor: pointer" @click.stop="openPlay(itemUrl)">
                  <div style="display: flex;flex-direction: column;justify-content: flex-start">
                      <div style="color: #333;font-size: 15px;margin-bottom: 5px">{{itemUrl.fileName}}</div>
                      <div style="color: #999;font-size: 13px">{{itemUrl.fileSize}}</div>
                  </div>
                  <div @click.stop="delImage(itemUrl)">
                      <img src="@/assets/delete.png" style="width: 18px;height: 18px;cursor: pointer">
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {v4} from "uuid";
export default {
    name: "renderRemark",
    props:{
        compOption: {
            type: Object,
        },
        mode: {
            type: String,
            default: 'sheji'
            /**
             * sheji
             * xiezuo
             * yulan
             * */
        }
    },
    data() {
        return {
            isShowClick: false,
            uploadFile:{}
        }
    },
    methods:{
        successUpload(res){
            if(res.code == 200){
                this.compOption.options.uploadConfig.value.push({
                    fileName:this.uploadFile.name,
                    id:v4(),
                    url:res.data,
                    fileSize:this.uploadFile.size ? (this.uploadFile.size / 1048576).toFixed(2) + 'MB' : '0.00MB'
                })
                this.$message.success('文件上传成功')
            }
        },
        handleBeforeUpload(file) {
            if(this.mode != 'xiezuo') return false
            const maxSize = (this.compOption.options.uploadConfig.isMaxFileSize * 1) * 1024 * 1024; // 最大文件大小 10MB
            if (file.size > maxSize) {
                this.$message.warning(`文件大小不能超过 ${maxSize / (1024 * 1024)}MB`);
                return false; // 阻止上传
            }
            this.uploadFile = {
                name:file.name,
                size:file.size,
            }
            return true; // 允许上传
        },
        showUpload(){
            if(this.compOption.options.uploadConfig.hasUploadBtn == '一直显示'){
                return true
            }
            else{
                let source = 0
                if(this.compOption.options.uploadConfig.hasUploadBtnSet.findIndex(item => item == '不适用时显示') != -1){
                    //不适用
                    if(this.compOption.options.value == '不适用') return true
                }
                else if(this.compOption.options.uploadConfig.hasUploadBtnSet.findIndex(item => item == '不得满分时显示') != -1){
                    if(this.compOption.options.radioConfig){
                        // 不得满分显示
                        for(let val of this.compOption.options.radioConfig){
                            source = source + val.source
                            if(source < this.compOption.options.totalSource){
                                return true
                            }
                            else{
                                return false
                            }
                        }
                    }
                    else{
                        return true
                    }

                }
                else{
                    //得满分显示
                    if(this.compOption.options.radioConfig){
                        // 不得满分显示
                        for(let val of this.compOption.options.radioConfig){
                            source = source + val.source
                            if(source < this.compOption.options.totalSource){
                                return true
                            }
                            else{
                                return false
                            }
                        }
                    }
                    else{
                        return true
                    }
                }
                return true
            }
        },
        delImage(item){
            if(this.mode != 'xiezuo') return
            const index = this.compOption.options.uploadConfig.value.findIndex(val => val.id == item.id)
            if(index != -1){
                this.compOption.options.uploadConfig.value.splice(index,1)
                this.$message.success('删除成功')
            }
        },
        openPlay(item){
            if(process.client){
                if ('download' in document.createElement('a')) {
                    // 非IE下载
                    const elink = document.createElement('a')
                    elink.href = item.url
                    elink.download = item.fileName
                    elink.style.display = 'none'
                    //link.target="_blank";
                    elink.click()
                }
            }
        },
    }
}
</script>

<style scoped lang="scss">
.black-box {
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
    border: 1px solid rgba(201, 198, 198, 0.5);
    border-radius: 2px;

    &:hover {
        cursor: pointer
    }
}
</style>
